<template>
    <view class="cn-component-form cn-component-form-sendSms">
        <nFormItem key="form_image_vcode" v-if="image_vcode.ticket" icon="cuIcon-pic" placeholder="图片验证码" :data.sync="data"
            field="image_vcode" style_tag="right: 210rpx;">
            <template #right>
                <image class="cn-form-image_vcode" @tap="setImageVcodeTimestamp" :src="image_vcode.url + '?ticket=' + image_vcode.ticket + '&timestamp=' + image_vcode.timestamp"></image>
            </template>
        </nFormItem>
        <nFormItem key="form_sms_code" icon="cuIcon-mail" placeholder="短信验证码" :changeInput="changeSmsCode" :data.sync="data"
            field="sms_code" style_tag="right: 240rpx;">
            <template #right>
                <button class='cu-btn bg-nddyny shadow' @tap="sendSms" :disabled="btn.disabled">{{btn.title}}{{btn.cd?' ('+btn.cd+')':''}}</button>
            </template>
        </nFormItem>
    </view>
</template>

<script>
    export default {
        props: ['parentData', 'uri', 'type'],
        data() {
            return {
                btn: {
                    title: '发送验证码',
                    titleBak: '发送验证码',
                    cd: '',
                    cdBak: '',
                    cdMax: 60,
                    disabled: false,
                },
                data: {
                    formtag: this.parentData.formtag,
                    form: {
                        phone: this.parentData.form.phone,
                        type: this.type,
                        sms_code: ''
                    },
                },
                image_vcode: {
                    url: this.$app.api_base_url + '/api/alone/createImageVcode',
                    ticket: '',
                    timestamp: '',
                },
            }
        },
        watch: {
            'parentData.form.phone'(new_phone) {
                this.data.form.phone = new_phone;
            },
            'parentData.formtag.sms_code'(new_sms_code) {
                this.$set(this.data.formtag, 'sms_code', new_sms_code);
            }
        },
        methods: {
            changeSmsCode(e) {
                this.parentData.form.sms_code = this.data.form.sms_code = e.target.value;
                this.$emit('update:parentData', this.parentData);
            },
            setImageVcodeTimestamp() {
                this.image_vcode.timestamp = (new Date()).getTime();
            },
            sendSms() {
                this.$api.post(this, {
                    loading: '发送中',
                    url: '/account/smsVcode' + this.uri,
                    success: (Result) => {
                        if (this.$api.form.componentToast(this, Result)) {
                            if (this.$ResultCode.RESULT_TICKET == Result.code) {
                                this.image_vcode.ticket = Result.result;
                            }
                            return;
                        }
                        this.image_vcode.ticket = '';
                        this.btn.title = '重新发送';
                        this.btn.cd = this.btn.cdMax;
                        this.btn.disabled = true;
                        const sendSmsInterval = setInterval(() => {
                            this.btn.cd--
                            if (this.btn.cd <= 0) {
                                clearInterval(sendSmsInterval)
                                this.btn.cd = this.btn.cdBak;
                                this.btn.title = this.btn.titleBak;
                                this.btn.disabled = false;
                                return;
                            }
                        }, 1000)
                        this.$store.commit('userToastSuccess', '发送成功');
                    }
                });
            }
        }
    }
</script>

<style lang="less">
    .cn-component-form-sendSms {
        .cn-form-image_vcode {
            height: 64rpx;
            width: 166.4rpx;
        }
    }
</style>
